<template>
  <v-card flat title="教师数据">
    <v-btn
      icon="mdi-plus"
      @click="openDialog"
      style="margin-left: 20px"
    ></v-btn>
    <template v-slot:text>
        <div class="d-flex flex-row">
            <v-text-field
                style="margin: 5px"
                v-model="searchid"
                label="教师号"
                variant="outlined"
                ></v-text-field>
                <v-text-field
                style="margin: 5px"
                v-model="searchname"
                label="教师姓名"
                variant="outlined"
            ></v-text-field>
            <v-btn icon="mdi-magnify" style="margin: 5px" @click="searchS"></v-btn>
        </div>
    </template>

    <!-- 弹出对话框 -->
    <v-dialog v-model="newDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>填写教师信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="edited.tname"
              label="教师姓名"
            ></v-text-field>
            <v-text-field
              v-model="edited.staff_id"
              label="工号"
            ></v-text-field>
            <v-text-field
              v-model="edited.sex"
              label="性别"
            ></v-text-field>
            <v-combobox
              v-model="edited.professional_ranks"
              :items="rankOptions"
              label="职称"
            ></v-combobox>
            <v-combobox
              v-model="edited.dept_id"
              :items="deptOptions"
              label="所属学院"
            ></v-combobox>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveChanges">保存</v-btn>
          <v-btn @click="closeDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="editDialog" max-width="500px" persistent>
      <v-card>
        <v-card-title>修改教师信息</v-card-title>
        <v-card-text>
          <v-form>
            <!-- 在这里添加输入框 -->
            <v-text-field
              v-model="change.tname"
              label="教师姓名"
            ></v-text-field>
            <v-text-field
              v-model="change.staff_id"
              label="教师号"
              readonly
            ></v-text-field>
            <v-text-field
              v-model="change.sex"
              label="性别"
            ></v-text-field>
            <v-combobox
              v-model="change.professional_ranks"
              :items="rankOptions"
              label="职称"
            ></v-combobox>
            <v-combobox
              v-model="change.dept_id"
              :items="deptOptions"
              label="所属学院"
            ></v-combobox>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="saveEdit">保存</v-btn>
          <v-btn @click="closeEditDialog">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>


    <!-- 数据表格 -->
    <v-card>
      <v-card-item>
        <v-data-table
          :headers="teacherHeaders"
          :items="items"
          :search="search"
        >
          <template v-slot:item="{ item }">
            <tr>
              <td>{{ item.tname }}</td>
              <td>{{ item.staff_id }}</td>
              <td>{{ item.sex }}</td>
              <td>{{ item.professional_ranks }}</td>
              <td>{{ item.dept_id }}</td>

              <td>
                <!-- 下拉菜单按钮 -->
                <v-btn icon="mdi-pencil" style="margin: 10px" @click="openEditDialog(item)">
                </v-btn>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card-item>
    </v-card>
  </v-card>
</template>
<script>
import axios from "axios";
export default {
  created() {
      this.searchS();
    },
  data() {
    return {
      search: "",
      pageSelected: -1,
      searchid: "",
      searchname: "",
      refresh: true,
      newDialog: false,
      editDialog: false,
      teacherHeaders: [
        { key: "tname", align: "start", sortable: false, title: "教师姓名" },
        { key: "staff_id", title: "工号" },
        { key: "sex", title: "性别" },
        { key: "professional_ranks", title: "职称" },
        { key: "dept_id", title: "所属学院" },
        { key: "option", title: "选项", sortable: false },
      ],
      items: [],
      rankOptions:[
        '讲师',
        '副教授',
        '教授'
      ],
      deptOptions: this.$root.dept_names,
    edited:{},
    change:{},
    };
  },
  methods: {

    async searchS() {
      // 处理搜索按钮点击事件
      console.log("Searching for:", this.searchid, this.searchname);
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/teacher",
        params: {
          staff_id: this.searchid,
          tname: this.searchname,
        },
      }).then((res) => {
        console.log("searchS:", res);
        new_items = res.data;
      });
      this.items = new_items.data;
      // 在这里可以添加搜索逻辑
    },
    async deleteT(teacher) {
      console.log("Deleting teacher with id:", this.deleteTid);

      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/teacher/delete",
        params: {
          staff_id: teacher,
        },
      }).then((res) => {
        console.log("deleteT:", res.data);
      });
      this.searchS();
    },
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    openDialog() {
      // 初始化编辑的学生信息
      this.newDialog = true;
      this.edited = {
        tname: "",
        staff_id: "",
        sex: "",
        professional_ranks: "",
        dept_name: "",
      };
      this.dialog = true;
    },
    async saveChanges() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.edited);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/teacher/add",
        params: {
          tname: this.edited.tname,
          staff_id: this.edited.staff_id,
          sex: this.edited.sex,
          professional_ranks: this.edited.professional_ranks,
          dept_name: this.edited.dept_id,
        },
      }).then((res) => {
        console.log("addT:", res.data);
      });
      // 关闭对话框
      this.newDialog = false;
      this.searchS();
    },
    closeDialog() {
      // 关闭对话框
      this.newDialog = false;
    },
    openEditDialog(item) {
      // 初始化编辑的学生信息
      this.editDialog = true;
      this.change = {
        tname: item.tname,
        staff_id: item.staff_id,
        sex: item.sex,
        professional_ranks: item.professional_ranks,
        dept_id: item.dept_id,
      };
      this.dialog = true;
    },
    closeEditDialog() {
      // 关闭对话框
      this.editDialog = false;
    },
    async saveEdit() {
      // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
      console.log("Saved changes:", this.change);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/admin/teacher/update",
        params: {
          tname: this.change.tname,
          staff_id: this.change.staff_id,
          sex: this.change.sex,
          professional_ranks: this.change.professional_ranks,
          dept_name: this.change.dept_id,
        },
      }).then((res) => {
        console.log("editT:", res.data);
      });
      // 关闭对话框
      this.editDialog = false;
      this.searchS();
    },
  },
};
</script>
